<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui.css" type="text/css"/>
    <link rel="stylesheet" href="css/chatInterface-css.css" type="text/css" />
    <title>聊天页面</title>
</head>
<body>

<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn" href="friend.html">
        <span class="aui-iconfont aui-icon-left"></span>
        朋友
    </a>
    <div class="aui-title">快乐的哒</div>
    <a class="aui-pull-right aui-btn">
        <span class="aui-iconfont aui-icon-my"></span>
    </a>
</header>

<section class="aui-chat">
    <div class="aui-chat-header">5月02日 22:09</div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="img/hgdlzh_07.jpg" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <div class="aui-list-item">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <img src="img/chatInterface-img/ltjm-03.jpg">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title">转账给你</div>
                                <div class="aui-list-item-right">100.00元</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-list-item bg-color">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title">转账</div>
                        <div class="aui-list-item-right">
                            <div class="aui-label aui-label-info">支</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-mag"><div class="text-color">钱已入袋，<span class="text1">给对方回个话</span></div></div>
    <div class="aui-chat-header">11:00</div>
    <div class="aui-chat-item aui-chat-right">
        <div class="aui-chat-media">
            <img src="img/hgdlzh_07.jpg" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <div class="aui-list-item">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <img src="img/chatInterface-img/ltjm-03.jpg">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title">转账给你</div>
                                <div class="aui-list-item-right">100.00元</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-list-item bg-color">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title">转账</div>
                        <div class="aui-list-item-right">
                            <div class="aui-label aui-label-info">支</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aui-chat-status">
            </div>
        </div>
    </div>
    <div class="text-mag"><div class="text-color">默默转账？<span class="text2">给对方捎句话吧</span></div></div>

</section>
<header class="aui-bar aui-bar-nav aui-bar-light box1">
    <a class="aui-pull-left aui-btn">
        <span class="btn2"><img src="img/chatInterface-img/ltjm-04.jpg"></span>
    </a>
    <div class="aui-title">
        <form action="javascript:search();">
            <input type="search" placeholder="" id="search-input">
        </form>
    </div>
    <a class="aui-pull-right aui-btn">
        <span><img src="img/chatInterface-img/ltjm-05.jpg"></span>&nbsp
        <span class="btn1"><img src="img/chatInterface-img/ltjm-06.jpg"></span>
    </a>
    <section class="aui-grid">
        <div class="aui-row">
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-grid-label">首页</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-gear"></i>
                <div class="aui-grid-label">设置</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-map"></i>
                <div class="aui-grid-label">地图</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-calendar"></i>
                <div class="aui-grid-label">日历</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-date"></i>
                <div class="aui-grid-label">日期</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-cart"></i>
                <div class="aui-grid-label">购物车</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-paper"></i>
                <div class="aui-grid-label">发现</div>
            </div>
            <div class="aui-col-xs-3">
                <i class="aui-iconfont aui-icon-video"></i>
                <div class="aui-grid-label">视频</div>
            </div>
        </div>
    </section>
</header>


<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script>
    $(function () {
       $(".btn1").on('click',function () {
           $(".box1").css("top","60%");
       });
       $(".text1").on("click",function () {
           $("#search-input").val("收到，谢谢");
       });
        $(".text2").on("click",function () {
            $("#search-input").val("钱已转，收到回个话哦");
        });
        $(".btn2").on("click",function () {
            $("#search-input").val("按住 说话").css({'text-align':'center','text-indent':'0','color':'gray'});
        });
        $(".aui-chat").click(function () {
            $(".box1").css("top","88%");
        });
    });
</script>

</body>
</html>